import { getLoginLog } from "../../api/login/index";
import { useEffect, useState } from "react";
import { Table } from "antd";
import './loginLog.css'

function LoginLog(){
    const [logList, setLogList] = useState([])
    function getLog(){
        const username = localStorage.getItem('username')
        getLoginLog({username}).then(res=>{
            console.log(res,'对应用户的登录日志');
            setLogList(res.data.reverse())
        })
    }
    useEffect(()=>{
        getLog()
    },[])

    const columns = [
        {
            title:'用户名',
            dataIndex:'username',
        },
        {
            title:'登录时间',
            dataIndex:'loginTime',
        },
        {
            title:'登录IP',
            dataIndex:'ip',
        },
        {
            title:'登录地点',
            dataIndex:'address',
        },
    ]

    return (
        <div className="loginLog">
            <h2>用户登录日志</h2>
            <div className="log-table">
                <Table columns={columns} dataSource={logList} rowKey='id' />
            </div>
        </div>
    )
}

export default LoginLog